import React, { Component } from 'react'
import {connect} from 'react-redux'
import {addperson} from '../redux/Action/action'
import {nanoid} from 'nanoid'
 class Person extends Component {
   addPerson=()=>{
     let name=this.name.value;
     let age=this.age.value;
     let PersonObj={id:nanoid(),name,age}
     this.props.addperson(PersonObj)
     this.name.value=""
     this.age.value=""
     console.log(this.props,PersonObj)
   }
  render() {
    const {addPerson}=this.props
    return (
      <div>
        <input type="text" placeholder="请输入姓名" ref={input=>this.name=input}/>
        <input type="text" placeholder="请输入年龄" ref={input=>this.age=input}/>
        <button onClick={this.addPerson}>添加人员信息</button>
        <ul>
        {addPerson.map(p=><li key={p.id}>{p.name}----{p.age}</li>)}
        </ul>
      </div>
    )
  }
}

export default connect(
  state=>({addPerson:state.Person}),
  {addperson}
)(Person)
